<template>
	<view class="btm_bar" :style="{width:width + 'px'}">
		<view class="icon_father">
			<uni-icons type="shop" size="50rpx" class="icons" color="#808080">
			</uni-icons>
			店铺
		</view>
		<view class="icon_father">
			<uni-icons type="cart" size="50rpx" class="icons numstyle" color="#808080">
			</uni-icons>
			购物车
			<view class="icon_father_number" v-if="shop.length > 0">
				{{shop.length}}
			</view>
		</view>
		<view class="bar_payof">
			<view class="bar_payof_left" @click="pushRouterShoperCart">
				加入购物车
			</view>
			<view class="bar_payof_right">
				立即购买
			</view>
		</view>
	</view>
</template>

<script>
		import {mapState,mapMutations,useStore } from 'vuex'
	import {
		defineComponent,
		reactive,
		markRaw,
		toRefs,
		watch,
		computed,
		inject
	} from 'vue'
	import {
		onReachBottom,
		onShow,
		onLoad,
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	
	
	export default defineComponent({
			name: "bottom-bar",
			props:['goodDetialData'],
			setup(props){
				const store = useStore()
				function pushRouterShoperCart(){
					const {goods_id, goods_name, goods_price, goods_count=1, goods_small_logo, goods_state,isChack=true} = props.goodDetialData
					store.commit('changeShopping',{goods_id,goods_name,goods_price,goods_count,goods_small_logo,goods_state,isChack})
					uni.switchTab({
						url:'../../pages/Cart/Cart'
					})
				}
				return {
					width:uni.getSystemInfoSync().windowWidth,pushRouterShoperCart,shop:computed(()=>store.state.shoppingCar)
				}
			},
			computed:{
				...mapState(['username'])
			},
		}
	)
</script>

<style lang="scss">
.btm_bar{
	display: flex;
	height: 100rpx;
	background-color: white;
	position: fixed;
	display: flex;
	align-items: center;
	bottom: 0;
	left: 0;
	.icon_father{
		width: 16%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 25rpx;
		color: #808080;
		position: relative;
		.icon_father_number{
			display: block;
			padding: 0 10rpx;
			font-size: 26rpx;
			color: white;
			border-radius: 50rpx;
			background-color: #DD524D;
			position: absolute;
			top: -5rpx;
			right: 10rpx;
		}
	}
	.bar_payof{
		width: 65%;
		background-color: #DD524D;
		height: 80%;
		border-radius: 40rpx;
		margin-left: 10rpx;
		display: flex;
		overflow: hidden;
		[class^="bar_payof"]{
			color: white;
			flex: 1;
			font-size: 28rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.bar_payof_right{
			background-color: #F0AD4E
		}
	}
	
}
</style>
